<template>
  <a-col :span="24" style="height:360px;">
    <div class="block" :id="EchartId"></div>
  </a-col>
</template>

<script>
import uuidv1 from "uuid/v1";
import {
  themeOption,
  buildOption,
  buildTitle,
  buildGrid,
  buildXAxis,
  buildYAxis,
  buildPieSeries,
  buildLineSeries,
  buildSeries
} from "./buildEChartOption";
import { buildDateAxis } from "@/unit/tool";

export default {
  name: "PieAndLine",
  props: {
    pieAndLineData: Object
  },
  data() {
    return {
      myChart: "",
      EchartId: ""
    };
  },
  watch: {
    pieAndLineData: function(newVal) {
      let { pieSeriesLists, lineDataLists, ...restOption } = newVal;
      if (pieSeriesLists.length > 0 && lineDataLists.length > 0) {
        let pieSeries = buildPieSeries(pieSeriesLists);
        let lineSeries = buildLineSeries(lineDataLists);
        let seriesLists = buildSeries(lineSeries, pieSeries);
        let option = {};
        Object.assign(option, {
          ...restOption,
          series: seriesLists
        });
        console.log(option);
        this.myChart.setOption(option);
      }
    }
  },
  methods: {
    init_chart() {
      // 绘制图表
      let myChart = this.myChart;

      let option = buildOption({
        xAxis: buildXAxis(),
        yAxis: buildYAxis()
      });

      myChart.setOption(option);
    }
  },
  created() {
    this.EchartId = uuidv1(); //获取随机id
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById(this.EchartId));
    this.init_chart();
  },
  destroyed() {
    this.myChart.clear();
  }
};
</script>

<style scoped="scoped">
.block {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
}
</style>
